<template>
	<view>
		<view class="userBox">
			<u-avatar :src="baseUrl+headimg" size="120rpx" @click="touserinfo"></u-avatar>
			<view class="text">
				<view class="nickBox">{{nickname}}</view>
				<view class="phoneBox">{{phone}}</view>
			</view>
		</view>
		<view class="listBox">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="30" color="#F0FFF0">
					</u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view>
			<u-cell-group>
				<u-cell size="large" title="地址管理" icon="map" :isLink="true"></u-cell>
				<u-cell size="large" title="我的钱包" icon="rmb-circle" :isLink="true"></u-cell>
				<u-cell size="large" title="我的二维码" icon="grid" :isLink="true"></u-cell>
				<u-cell size="large" title="我的小伙伴" icon="account" :isLink="true"></u-cell>
				<u-cell size="large" title="0元试用" icon="gift" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
		<!-- 登录 -->
		<view class="loginBox" v-if="!phone">
			<!-- 判断平台登录 -->
			<!-- #ifdef H5 -->
			<u-button type="primary" text="手机号登录" @click="toLogin"></u-button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="getPhoneNumber" @getphonenumber="wxLogin" type="primary">微信一键登录</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//引入接口地址
	import {
		wxLogin
	} from "../../request/app.js"
	export default {
		data() {
			return {
				isShow: false,
				nickname: "未登录",
				phone: "",
				headimg: "",
				baseUrl: baseUrl,
				list: [{
						name: 'star-fill',
						title: '我的收藏'
					},
					{
						name: 'clock-fill',
						title: '历史记录'
					},
					{
						name: 'red-packet-fill',
						title: '我的红包'
					},
					{
						name: 'share-fill',
						title: '分享好友'
					},
				],
			}
		},
		methods: {
			//跳转到H5登录页
			toLogin() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			//微信一键登录
			wxLogin(e) {
				console.log(e);
				let _this = this
				//判断本地是否存在用户信息
				if (uni.getStorageSync("userInfo")) {
					_this.getUserInfo()
					return
				}
				//用户点击拒绝
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					wx.showToast({
						title: "获取授权信息失败",
						icon: "none"
					})
				} else {
					let {
						iv,
						encryptedData
					} = e.detail
					//获取加密code
					uni.login({
						success(res) {
							//调用微信登录接口
							wxLogin({
								iv,
								encryptedData,
								code: res.code
							}).then(res => {
								console.log(res);
								//将信息存入本地
								uni.setStorageSync("userInfo", res.data.list)
								_this.getUserInfo()
							})
						}
					})
				}
			},
			//获取本地用户信息
			getUserInfo() {
				if (uni.getStorageSync("userInfo")) {
					let userInfo = uni.getStorageSync("userInfo")
					this.isShow = true
					// #ifdef H5
					this.nickname = "周杰伦"
					// #endif
					// #ifdef MP-WEIXIN
					this.nickname = userInfo.nickname
					// #endif
					this.phone = userInfo.phone
					this.headimg = userInfo.avatarurl
				}
			},
			//点击跳转到会员中心
			touserinfo(){
				uni.navigateTo({
					url:"/pages/userinfo/userinfo"
				})
			}
		},
		//页面一加载
		onLoad() {
			//获取本地用户信息
			this.getUserInfo()
		}
	}
</script>

<style>
	.loginBox {
		margin-top: 100rpx;
		padding: 0rpx 80rpx;
	}

	.userBox {
		display: flex;
		padding: 40rpx 40rpx 0 40rpx;
		background-color: #FF6900;
	}

	.userBox>.text {
		margin-left: 40rpx;
	}

	.userBox .nickBox {
		font-size: 50rpx;
		color: #F0FFF0;
	}

	.userBox .phoneBox {
		font-size: 36rpx;
		color: #ffe862;
	}

	.listBox {
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #FF6900, #FF9A00);
		padding-bottom: 40rpx;
		color: #F0FFF0;
	}
</style>
